<template>
  <div>

<!--    头-->
    <div style="padding: 20px 20px 0px 20px">
    <el-form :inline="true" :model="productInput" class="demo-form-inline">
      <span style="font-size: 35px">商品管理</span>

      <el-form-item style="float: right;margin-top: 8px">
        <el-button type="primary" @click="selectProduct">查询</el-button>
      </el-form-item>

      <el-form-item style="float: right;margin-top: 8px">
        <el-input v-model="productInput.typeName" placeholder="产品类型"></el-input>
      </el-form-item>

      <el-form-item style="float: right;margin-top: 8px">
        <el-input v-model="productInput.name" placeholder="商品名称"></el-input>
      </el-form-item>

      <el-form-item style="float: right;margin-top: 8px">
        <el-input v-model="productInput.shopName" placeholder="店铺名称"></el-input>
      </el-form-item>
    </el-form>
<!--      表格-->
      <el-table
          :data="productData"
          style="width: 100%;border:1px solid #d2d2d2"
          :show-overflow-tooltip="false"
          height="792"
          stripe


      >
        <el-table-column
            prop="sname" label="店铺名称" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
            prop="pname" label="名称" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
            prop="types" label="类型" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
            prop="prname" label="规格" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
            prop="fee" label="价格" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
            prop="stock" label="库存" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
            prop="describes" label="简介" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
            prop="sales" label="销量" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
            prop="see" label="浏览量" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
            prop="status" label="状态" :show-overflow-tooltip="true" :formatter="isStatus">
        </el-table-column>
        <el-table-column label="操作" >
          <template slot-scope="scope">
<!--            <el-button-->
<!--                size="mini"-->
<!--                @click="update(scope.$index, scope.row)">修改</el-button>-->
                      <el-button
                          size="mini"
                          @click="delet(scope.$index, scope.row)">下架/上架</el-button>
          </template>
        </el-table-column>
      </el-table>
<!--      分页-->
      <el-pagination
          background
          layout="prev, pager, next"
          @current-change="page"
          :page-size="productPage.size"
          :total="this.productPage.total"
          style="margin-top: 10px;">
      </el-pagination>
    </div>


<!--    修改-->
    <el-dialog
        :visible.sync="updateProduct"
        width="30%"
        :before-close="ProductClose"
        style="text-align: center"
    >
      <el-form label-width="80px" :model="productDataRow">
        <el-form-item label="店铺名称">
          <el-input v-model="productDataRow.sname" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="productDataRow.pname" ></el-input>
        </el-form-item>
        <el-form-item label="商品类型">
          <el-input v-model="productDataRow.types" ></el-input>
        </el-form-item>
        <el-form-item label="商品规格">
          <el-input v-model="productDataRow.prname" ></el-input>
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input v-model="productDataRow.fee" ></el-input>
        </el-form-item>
        <el-form-item label="商品库存">
          <el-input v-model="productDataRow.stock" ></el-input>
        </el-form-item>
        <el-form-item label="商品简介">
          <el-input v-model="productDataRow.describes" ></el-input>
        </el-form-item>
        <el-form-item label="商品销量">
          <el-input v-model="productDataRow.sales" ></el-input>
        </el-form-item>
        <el-button type="primary" plain
                   style="width: 150px;height: 50px ;font-size: 25px;"
                   @click="ProductUpdate">确定修改</el-button>

      </el-form>
    </el-dialog>

  </div>
</template>

<script>
import as from "@/axios/axios";

export default {
name: "Product",
  created() {
    this.getProduct()
  },
  data(){
    return {
      updateProduct:false,
      productInput:{},
      productData:[],
      productDataRow:{},
      productPage:{total:1,pages:1,size:14},
    }
  },
  methods:{
    getProduct(){
      as.post("/product/getProduct",{
        community: localStorage.getItem("community"),
        typeName:this.productInput.typeName,
        name:this.productInput.name,
        shopName:this.productInput.shopName,
        current:this.productPage.pages,
        size:this.productPage.size,
      }).then((res)=>{
        console.log(res)
        this.productData = res.data.data.records
        this.productPage.total = res.data.data.total
      })
    },
    //查询
    selectProduct(){
      this.getProduct()
    },
    //下一页
    page(i){
      this.productPage.pages = i
      this.getProduct()
    },
    // 修改
    update(index,row){
      this.productDataRow = {...row}
      this.updateProduct = true
    },
    //取消修改
    ProductClose(done){
      this.productDataRow = {}
      done()
    },
    //确定修改
    ProductUpdate(){
      console.log(this.productDataRow)
      as.post("/product/updateProduct",this.productDataRow).then((res)=>{
        console.log(res)
        this.getProduct();
      })
      this.productDataRow = {}
      this.updateProduct = false
    },

    // 下架
    delet(index,row){

      as.post("/product/deleteProduct",{id:row.id}).then((res)=>{
        console.log(row)
        console.log(res)
        this.getProduct()
      })
    },
    isStatus(row, column, cellValue, index){
      if(cellValue == 0){
        return "上架"
      }else if(cellValue == 1){
        return "下架"
      }
    }
  }

}
</script>

<style scoped>

</style>